<template>
  <div class="user" :class="{active : active.id === user.user_id}">
    <div class="user_box" :class="{active : active.id === user.user_id}" v-if="!nomsg">
      <div class="headpic">
        <img :src="user.headimgurl ? user.headimgurl : defaultpic" draggable="false" />
        <div class="new_num" v-if="user.new_msg_num && user.new_msg_num > 0">
          {{user.new_msg_num < 100 ? user.new_msg_num : '99+'}}
        </div>
      </div>
      <div class="text">
        <div class="name">
          <b>{{user.name || user.nickname}}</b><span>{{calcTime(user.last_butt_time)}}</span>
        </div>
        <div class="newmsg" v-if="user.inputCont"><span style="color:red;">[草稿]</span>{{user.inputCont}}</div>
        <div class="newmsg" v-else>{{user.last_butt_msg}}</div>
      </div>
    </div>
    <div class="user_box nomsg" v-else>
      <div class="headpic">
        <img :src="user.headimgurl ? user.headimgurl : defaultpic" draggable="false" />
      </div>
      <div class="text">
        <div class="name">
          <b>{{user.name || user.nickname}}</b>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'userItem',
    data () {
      return {
        defaultpic: require('../../assets/images/timg.jpg')
      }
    },
    props: {
      user: {
        default: {}
      },
      active: {
        default: false
      },
      nomsg: {
        default: false
      }
    },
    created () {
    },
    methods: {
      calcTime (timer) {
        let time = new Date(parseInt(timer) * 1000)
        let data = new Date()
        let year = data.getFullYear()
        let month = data.getMonth() + 1
        month = month > 9 ? month : '0' + month
        let day = data.getDate()
        day = day > 9 ? day : '0' + day
        let inday = new Date(`${year}-${month}-${day} 00:00:00`)
        let inyear = new Date(`${year}-01-01 00:00:00`)
        var inTime = {
          year: time.getFullYear(),
          month: time.getMonth() + 1 > 9 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1),
          day: time.getDate() > 9 ? time.getDate() : '0' + time.getDate(),
          hours: time.getHours() > 9 ? time.getHours() : '0' + time.getHours(),
          min: time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes(),
          sc: time.getSeconds() > 9 ? time.getSeconds() : '0' + time.getSeconds()
        }
        if (time > inday) {
          return `${inTime.hours}:${inTime.min}`
        } else if (time > inyear) {
          return `${inTime.month}-${inTime.day}`
        } else {
          return `${inTime.year}-${inTime.month}`
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import './style.less';
</style>
